<template>
    <div class="main">
        <div class="set">
            <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
            <ul>
                <li class="li">
                    <div class="tou">头像</div>
                    <div>
                        <van-uploader :after-read="afterRead" />
                    </div>
                </li>
                <li>
                    <div class="tou">昵称</div>
                    <div class="right">user123 ></div>
                </li>
                <li>
                    <div class="tou">性别</div>
                    <div class="right">男 ></div>
                </li>
                <li>
                    <div class="tou">密码设置</div>
                    <div class="right">></div>
                </li>
                <li>
                    <div class="tou">手机号</div>
                    <div class="right">></div>
                </li>
            </ul>
        </div>
        <button type="button">退出登录</button>
    </div>

</template>
<script>
export default {
    data() {
        return {

        };

    }, methods: {
        onClickLeft() {
            history.back()
        }
    }
};
</script>
<style lang="scss" scoped>
.li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 0 0 0;
    margin: 0 auto;
    height: 87.98px;
    line-height: 87.98px;
}
li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: #fff;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
}
.tou {
    margin-left: 15px;
}
.main {
    // padding: 0 20px;
    height: 667px;
}
.right {
    margin-right: 15px;
}
button {
    height: 50px;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    background-color: #ffff;
}
</style>